<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>slot-插槽</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<h3>插槽，保留一个口，可以插入其他片段</h3>
	<hr>
	<div id="app">
		<books>
			<book-title slot="book-title" :title="title"></book-title>
			<hr>
			<book-list slot="book-list" v-for="book in books" :book="book"></book-list>
		</books>
		

	</div>

	<script>

		Vue.component("books",{
			template:'	<div><slot name="book-title"></slot>\
						<ul>\
							<slot name="book-list"></slot>\
						</ul></div>'
		});

		Vue.component("book-title",{
			props:["title"],
			template:'<p>{{title}}</p>'
		});

		Vue.component("book-list",{
			props:["book"],
			template:'<li>{{book}}</li>'
		});


		var vue = new Vue({
			el:"#app",
			data:{
				title:"在读",
				books:["《一个叫欧维的男人决定去死》","《大道朝天》","《将夜》","《剑来》"]
			}
		});
	</script>
	
</body>
</html>